<template>
  <div>
    <div id="boo">
      <span>今日秒杀</span>
    </div>
    <p id="size">
      <span >距本场结束还剩</span>
      <span>{{d}}</span>天
      <span>{{h}}</span>时
      <span>{{m}}</span>分
      <span>{{s}}</span>秒
    </p>
    <scroller lock-y :scrollbar-x=false>
      <div class="box1">
        <div class="box1-item" v-for="n in kill">
          <img :src="n.img">
          <p id="title">{{n.title}}</p>
          <p id="price">￥{{n.price}}</p>
        </div>
      </div>
    </scroller>

  </div>
</template>



<script>
import { mapState, mapGetters } from 'vuex';
import { Scroller } from 'vux'

export default {
  components: {
    Scroller,

  },
  data() {
    return {
      t: "",
      X: "",
      d: "",
      h: "",
      m: "",
      s: "",
    }
  },

  mounted() {
    this.$store.dispatch("requestkill");
     this.$store.dispatch("requestkill");
        var EndTime = new Date(2017, 12, 10, 23, 59, 59);
        var NowTime = new Date();
        this.t = EndTime.getTime() - NowTime.getTime() - 30 * 24 * 60 * 60 * 1000;
        // console.log(this.t)
        if (this.t > 0) {
            this.d = Math.floor(this.t / 1000 / 60 / 60 / 24);
            this.h = Math.floor(this.t / 1000 / 60 / 60 % 24);
            this.m = Math.floor(this.t / 1000 / 60 % 60);
            this.s = Math.floor(this.t / 1000 % 60);
        }
        
          setInterval(()=>{
            this.t = this.t-1000
            // console.log(this.t)
            if (this.t > 0) {
            this.d = Math.floor(this.t / 1000 / 60 / 60 / 24);
            this.h = Math.floor(this.t / 1000 / 60 / 60 % 24);
            this.m = Math.floor(this.t / 1000 / 60 % 60);
            this.s = Math.floor(this.t / 1000 % 60);
        }
        }, 1000)
           
  },
  methods: {

  },
  computed: {
    ...mapState([
      "kill"
    ])
  }
}
</script>

<style scoped>
.box1 {
  height: 26vh;
  /* position: relative; */
  width: 795px;
  margin-top: 1vh;
  
}

.box1-item {
  width: 100px;
  height: 20vh;
  /* background-color: #ccc; */
  display: inline-block;
  margin-left: 15px;
  float: left;
  text-align: center;
  /* line-height: 100px; */
}

.box1-item:first-child {
  margin-left: 0;
}


img {
  width: 100px;
  height: 100px;
}

p {
  margin: 0;
}

#size {
  font-size: 13px;
  margin-top: 1vh;
  margin-left: 4vw;
}

#boo {
  width: 100%;
  height: 6vh;
  line-height: 6vh;
  border: solid 1px #dbdbdb;
  color: black;
  font-size: 15px;
}
#title {
    font-size: 13px;
}

#price {
    color: red;
    font-size: 12px;
}
</style>